---
title: Fonts - Material Tailwind
description: Learn how to customize the font families for Material Tailwind.
navigation: ["default-font-families", "customizing-font-families"]
github: fonts
prev: colors
next: shadows
---

# Customizing Fonts - Material Tailwind

Customize the default font families for @material-tailwind/react and add your own custom fonts that you like to have for your project.

<br />
<br />

<DocsTitle href="default-font-families">
## Default Font Families
</DocsTitle>

<span id="default-font-families" className="scroll-mt-48" />

@material-tailwind/react provides a set of default font families that you can use.

```js
const fontFamily = {
  sans: ["Roboto", "sans-serif"],
  serif: ["Roboto Slab", "serif"],
  body: ["Roboto", "sans-serif"],
};
```

---

<DocsTitle href="customizing-font-families">
## Customizing Font Families
</DocsTitle>

<span id="customizing-font-families" className="scroll-mt-48" />

You can customize the default font families for @material-tailwind/react very easy and straightforward, it's the same as customizing font families for tailwindcss.

You just need to customize the font family that you like through the <Code>fontFamily</Code> object for <Code>tailwind.config.js</Code> file.

```js {4}
module.exports = withMT({
  theme: {
    fontFamily: {
      sans: ["Open Sans", "sans-serif"],
    },
  },
});
```

<br />
<br />
<br />

For more information about tailwindcss font families customization, please check the <a href="https://tailwindcss.com/docs/font-family?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">TailwindCSS Documentation</a>
